<template>
  <view>
    <template v-for="(v, i) in getList" :key="i">
      <view class="preview-doc" @click="openDocument({ filePath: v.url })">
        <image class="no-cover" src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/document-icon.png" mode="scaleToFill" />
        <view v-if="v.name" class="doc-title">
          <text>{{ v.name }}</text>
        </view>
      </view>
    </template>
  </view>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  import { type DocFileResult } from './types';
  import { useUpload } from '@/hooks/core/useUpload';
  import { propTypes } from '@/utils/propTypes';
  import { isArrayString } from '@/utils/is';

  const props = defineProps({
    docList: propTypes.string,
    fileName: propTypes.string,
  });

  const getList = computed((): DocFileResult[] => {
    const str = props.docList;
    if (isArrayString(str)) {
      const arr = JSON.parse(str) as string[];
      return arr.map((v) => JSON.parse(v));
    }
    return [{ name: props.fileName, url: str }];
  });

  const { openDocument } = useUpload();
</script>

<style lang="scss" scoped>
  .preview-doc {
    position: relative;
    height: 385rpx;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10rpx;
    overflow: hidden;
    margin-bottom: 30rpx;
    .no-cover {
      width: 140rpx;
      height: 140rpx;
    }
    .doc-title {
      height: 86rpx;
      background: rgba(0, 0, 0, 0.5);
      width: calc(100% - 30rpx);
      padding-left: 30rpx;
      color: #fff;
      font-size: 28rpx;
      line-height: 86rpx;
      position: absolute;
      left: 0;
      bottom: 0;
    }
  }
</style>
